import React, { useEffect } from "react";
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button,Form, Input, Select, Switch, Spin } from 'antd'
import {ArrowLeftOutlined} from '@ant-design/icons';
import ContentLayout from "../../../components/layout/ContentLayout";
import { useFormData } from '../../../hooks/form/useFormData'
import { Email_rules, Common_rules } from '../../../config/formRules'
import './detail.css'
const UserDetail = () =>{
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const pageInfo = {
        page: searchParams.get('page'),
        pageKid: searchParams.get('id')
    }
    const handleGoBack = () => {
        navigate('/users')
    }
    const { loading,handleSave,viewLoading,getData } = useFormData({
        form,
        formUrl: 'user',
        backCb: handleGoBack,
        pageInfo,
        keyName: 'userid'
    })
    useEffect(() => {
        const id = searchParams.get('id')
        id && getData(id)
    }, [searchParams])
    return (
        <div style={{ height: '100%',width: '100%' }}>
            <ContentLayout
                searchComp={
                  <div className="back-btn">
                      <Button onClick={handleGoBack} type={"primary"} icon={<ArrowLeftOutlined />}>返回</Button>
                  </div>
                }
                mainComp={
                <div className="detail-main">
                    <Spin wrapperClassName="spin-content" spinning={viewLoading} >
                        <Form
                            disabled={pageInfo.page === 'view'}
                            form={form}
                            size={"large"}
                            labelCol={{
                                span: 4,
                            }}
                            wrapperCol={{
                                span: 10,
                            }}
                            layout="horizontal"
                            style={{
                                width: '100%',
                            }}
                        >
                            <Form.Item rules={Common_rules} name="username" label="用户名">
                                <Input />
                            </Form.Item>
                            { !pageInfo.page &&
                                <Form.Item rules={Common_rules} name="password" label="密码">
                                <Input.Password />
                            </Form.Item>
                            }
                            <Form.Item rules={Email_rules} name="email" label="邮箱">
                                <Input />
                            </Form.Item>
                            <Form.Item rules={Common_rules} name="role" label="角色">
                                <Select>
                                    <Select.Option value={0}>普通用户</Select.Option>
                                    <Select.Option value={1}>超级管理员</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item name="status" label="用户状态" valuePropName="checked">
                                <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                            </Form.Item>
                        </Form>
                    </Spin>
                </div>
                }
                footerComp={
                  <div className="footer-btns">
                      <Button className="btn" onClick={handleGoBack}>取消</Button>
                      { pageInfo.page !== 'view' && <Button loading={loading} onClick={ handleSave } type={"primary"}>提交</Button> }
                  </div>
                }
            />
        </div>
    )
}

export default UserDetail
